<template>
  <div class="menuList">
    <div class="mains_contain">
      <el-form :inline="true" size="small" label-width="100px">
        <el-form-item>
          <el-button
            type="primary"
            @click="handlerAdd"
            icon="el-icon-plus"
            size="mini"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        size="mini"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="菜单名称" min-width="200" />
        <el-table-column prop="menuType" label="类型">
          <template slot-scope="{ row }">
            <!-- <el-tag effect="dark" size="mini" v-if="row.menuType == 0"
              >一级菜单</el-tag
            >
            <el-tag
              effect="dark"
              type="success"
              size="mini"
              v-if="row.menuType == 1"
              >子菜单</el-tag
            >
            <el-tag
              effect="dark"
              type="warning"
              size="mini"
              v-if="row.menuType == 2"
              >按钮/权限</el-tag
            > -->
              <span style="color:#409EFF"  v-if="row.menuType == '0'">一级菜单</span>
              <span style="color:#67C23A" v-if="row.menuType == '1'">子菜单</span> 
              <span style="color:#E6A23C"  v-if="row.menuType == '2'">按钮/权限</span>

          </template>
        </el-table-column>
        <el-table-column prop="icon" label="菜单图标">
           <el-button
              slot="append"
              icon="el-icon-setting"
              @click="toCheck"
            ></el-button>
        </el-table-column>
        <el-table-column prop="component" label="组件" min-width="140">
        </el-table-column>
        <el-table-column
          prop="url"
          label="路径"
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="perms"
          label="权限标识"
          min-width="140"
        ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="110">
        </el-table-column>
        <el-table-column prop="sortNo" label="排序"> </el-table-column>
        <el-table-column label="操作" min-width="250" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="handlerUpdate(row)"
              icon="el-icon-edit"
              >修改</el-button
            >
            <el-button
              type="text"
              style="color:#F56C6C"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增 -->
    <el-drawer
      :title="title"
      direction="rtl"
      :visible.sync="dialogVisible"
      width="500px"
      @closed="cancle"
    >
      <div style="padding: 10px">
        <el-form
          ref="formName"
          :model="form"
          label-width="100px"
          :inline="false"
          size="small"
          :rules="rules"
        >
          <el-form-item label="菜单类型">
            <el-radio-group v-model="form.menuType">
              <el-radio :label="0">一级菜单</el-radio>
              <el-radio :label="1">子菜单</el-radio>
              <el-radio :label="2">权限/按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="form.menuType == 0">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="菜单路径" prop="url">
              <el-input v-model="form.url" clearable />
            </el-form-item>
            <el-form-item label="前端组件" prop="component">
              <el-input v-model="form.component" clearable />
            </el-form-item>
            <el-form-item label="默认跳转地址" prop="redirect">
              <el-input v-model="form.redirect" clearable />
            </el-form-item>
            <el-form-item label="授权标识">
              <el-input v-model="form.perms" clearable />
            </el-form-item>
            <el-form-item label="菜单图标">
              <el-input v-model="form.icon" clearable>
                <!-- <template slot="append"><i class="el-icon-setting"></i></template> -->
                <el-button
                  slot="append"
                  icon="el-icon-setting"
                  @click="toCheck"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="form.sortNo" clearable />
            </el-form-item>
            <el-form-item label="是否路由菜单">
              <el-switch v-model="form.route"></el-switch>
            </el-form-item>
            <el-form-item label="是否缓存路由">
              <el-switch v-model="form.keepAlive"></el-switch>
            </el-form-item>
            <el-form-item label="是否隐藏路由">
              <el-switch v-model="form.hidden"></el-switch>
            </el-form-item>
          </template>
          <template v-if="form.menuType == 1">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="父级菜单" prop="parentId">
              <el-cascader
                style="width: 100%"
                :props="{
                  emitPath: false,
                  checkStrictly: true,
                  value: 'key',
                  label: 'title',
                }"
                v-model="form.parentId"
                :options="parentOptions"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="菜单路径" prop="url">
              <el-input v-model="form.url" clearable />
            </el-form-item>
            <el-form-item label="前端组件" prop="component">
              <el-input v-model="form.component" clearable />
            </el-form-item>
            <el-form-item label="授权标识">
              <el-input v-model="form.perms" clearable />
            </el-form-item>
            <el-form-item label="菜单图标">
              <el-input v-model="form.icon" clearable>
                 <el-button
                  slot="append"
                  icon="el-icon-setting"
                  @click="toCheck"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="form.sortNo" clearable />
            </el-form-item>
            <el-form-item label="是否路由菜单">
              <el-switch v-model="form.route"></el-switch>
            </el-form-item>
            <el-form-item label="是否缓存路由">
              <el-switch v-model="form.keepAlive"></el-switch>
            </el-form-item>
            <el-form-item label="是否隐藏路由">
              <el-switch v-model="form.hidden"></el-switch>
            </el-form-item>
          </template>
          <template v-if="form.menuType == 2">
            <el-form-item label="按钮名称" prop="name">
              <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="父级菜单" prop="parentId">
              <el-cascader
                style="width: 100%"
                :props="{
                  emitPath: false,
                  checkStrictly: true,
                  value: 'key',
                  label: 'title',
                }"
                v-model="form.parentId"
                :options="parentOptions"
                clearable
              ></el-cascader>
            </el-form-item>
            <!-- <el-form-item label="菜单路径">
              <el-input v-model="form.url" clearable />
            </el-form-item> -->
            <el-form-item label="授权标识" prop="perms">
              <el-input v-model="form.perms" clearable />
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="form.sortNo" clearable />
            </el-form-item>
            <el-form-item label="授权策略">
              <el-radio-group v-model="form.status">
                <el-radio label="0">无效</el-radio>
                <el-radio label="1">有效</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-form>
        <div style="text-align: right">
          <el-button type="primary" @click="handlerSave" size="small"
            >保存</el-button
          >
          <el-button @click="cancle" size="small">取消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 图标 -->
    <el-dialog
      title="选择图标"
      :visible.sync="dialogVisibleTubiao"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="iconList">
        <div
          v-for="(item, index) in tubiaoList"
          :key="index"
          @click="check(item)"
        >
          <svg-icon :icon-class="item.name" />
        </div>
      </div>
      <div style="text-align: right">
        <el-button type="primary" @click="ishandlerSave" size="small"
          >保存</el-button
        >
        <el-button @click="dialogVisibleTubiao = false" size="small"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/sys/menu";
export default {
  data() {
    return {
      tubiaoList: [
        {
          name: "home",
          value: "home",
        },
        {
          name: "baseConfig",
          value: "baseConfig",
        },
        {
          name: "integration",
          value: "integration",
        },
        {
          name: "log",
          value: "log",
        },
        {
          name: "site",
          value: "site",
        },
        {
          name: "sys",
          value: "sys",
        },
        {
          name: "upgrade",
          value: "upgrade",
        },
      ],
      tableData: [],
      parentOptions: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      title: "新增",
      dialogVisible: false,
      dialogVisibleTubiao: false,
      form: {
        route: true,
        menuType: 0,
        keepAlive: false,
        status: "1",
        hidden: false,
      },
      rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        url: [{ required: true, message: "请输入菜单url", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择父级菜单", trigger: "change" },
        ],
        component: [
          { required: true, message: "请输入前端组件", trigger: "blur" },
        ],
        perms: [
          {
            required: true,
            message: "请输入菜单权限标识",
            trigger: "blur",
          },
        ],
      },
      menuType: "1",
      addFlag: false,
    };
  },
  mounted() {
    this.getPageList();
    this.getqueryTreeList();
    // this.getMeunList()
  },
  methods: {
    check(item) {
      this.form.icon = item.name;
      this.dialogVisibleTubiao = false;
    },
    ishandlerSave() {
      if (!this.form.icon) {
        return this.$message({
          type: "warning",
          message: "请选择一个图标!",
        });
      }
    },
    toCheck() {
      this.dialogVisibleTubiao = true;
    },
    // 获取全部的权限树
    // getMeunList() {
    //   api.menuList().then(res => {
    //     this.tableData = res.data
    //     console.log(this.tableData, ' 获取全部的权限树');
    //   })
    // },
    // 获取全部的权限树
    getqueryTreeList() {
      api.queryTreeList().then((res) => {
        this.parentOptions = res.data.treeList;
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteId(row.id).then((resp) => {
            if(resp.code=='200'){
               this.$message({
                type: "success",
                message: "删除成功!",
              });
              if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
                if (this.pagination.page > 1) {
                  this.pagination.page = this.pagination.page - 1;
                }
              }
              this.search();
              }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlerUpdate(row) {
      this.title = "编辑";
      this.dialogVisible = true;
      this.addFlag = false;
      api.check(row.id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    getPageList() {
      this.search();
    },
    search() {
      api.menuList().then((res) => {
        this.tableData = res.data;
        console.log(this.tableData, " 获取全部的权限树");
      });
    },
    handlerAdd() {
      this.title = "新增";
      this.addFlag = true;
      this.dialogVisible = true;
      this.form = {
        route: true,
        menuType: 0,
        keepAlive: false,
        status: "1",
      };
      this.getqueryTreeList();
    },
    cancle() {
      this.dialogVisible = false;
      this.menuType = "1";
      this.form = {};
    },
    handlerSave() {
      this.$refs["formName"].validate((valid) => {
        if (valid) {
          this.menuType = "1";

          if (this.form.id) {
            var p = Object.assign({}, this.form);
            // if (p.parentId) {
            //   p.parentId = p.parentId.join(',')
            // }
            api.update(p).then((resp) => {
              this.dialogVisible = false;
              this.getPageList();
            });
          } else {
            var p = Object.assign({}, this.form);
            // if (p.parentId) {
            //   p.parentId = p.parentId.join(',')
            // }
            api.save(p).then((resp) => {
              console.log(resp);
              this.dialogVisible = false;
              this.getPageList();
            });
          }
        } else {
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.menuList {
  padding: 20px;
  .iconList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    .svg-icon {
      font-size: 24px;
      background: rgba(0, 0, 0, 0.5);
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>